<!-- Created by mhy on 2018/6/21.

 -->
<template>
    <div class="login-phone" style="background-color: white">
      <p class="login-title-parent">装裱大师</p>
      <p class="login-title-sub">管理后台</p>
      <input id="mobile-input" class="login-mobile-input" placeholder="手机号">
      <div class="login-code">
        <input class="login-code-input" id="code-input" placeholder="验证码">
        <button class="login-code-btn" id="code-btn" @click="getCode()">获取验证码</button>
      </div>
      <div class="login-btn">
        <button class="login-btn-btn" id="login-btn" @click="login()">登录</button>
      </div>
      <button class="login-btn-wx" @click="routerToWx()">切换至  微信扫码登录</button>
    </div>
</template>

<script>
  import {mapGetters,mapActions,mapState} from 'vuex'

    export default {
      data () {
          return {
              timeLeft: 60,
              timer: null
          }
      },
      methods: {
        ...mapActions([
            'getMobileCode',
            'loginWithPhone',
            'getUserInfo',
          'getALLFactoryList',
        ]),
          routerToWx(){
            this.$router.push('/login/loginwx');
          },
          getCode(){
            if(this.timeLeft < 60 && this.timer != null){
                console.log(this.timeLeft)
                return;
            }
            let mobile = document.getElementById('mobile-input').value;
            if(this.verifyMobile(mobile) == false){
                this.$dialog.toast({
                  mes:'请正确填写11位手机号',
                  timeout: 1000
                })
                return
            }
            this.$store.state.login.userphone = mobile
            this.getMobileCode({userphone:mobile})
              .then(data => {
                let btn = document.getElementById('code-btn')
//                btn.innerHTML = '60s'
                this.timer = setInterval(() => {
                    if(this.timeLeft > 0){
                      btn.innerHTML = this.timeLeft + 's'
                      this.timeLeft -= 1
                    }else{
                      clearInterval(this.timer)
                      btn.innerHTML = '获取验证码'
                      this.timeLeft = 60
                      this.timer = null
                    }
                },1000)
              })
          },
          verifyMobile(mobile){
              return mobile.length == 11;
          },
          verifyCode(code){
              return code.length == 6;
          },
          login(){
            let mobile = document.getElementById('mobile-input').value;
            let code = document.getElementById('code-input').value;
            if(this.verifyMobile(mobile) == false){
              this.$dialog.toast({
                mes:'请正确填写11位手机号',
                timeout: 1000
              })
              return
            }
            if(this.verifyCode(code) == false){
              this.$dialog.toast({
                mes:'请正确填写6位验证码',
                timeout: 1000
              })
              return
            }
            if(!this.$store.state.login.coderesult){
              this.$dialog.toast({
                mes:'请先获取验证码',
                timeout: 1000
              })
              return
            }
//            this.$store.state.login.userphone = mobile;
//            this.$store.state.login.code = code;
//            console.log(this.$store.state.login.coderesult)
            this.loginWithPhone({userphone:mobile,code:code,codeid:this.$store.state.login.coderesult.result.codeid})
              .then((data)=>{
                this.getUserInfo({userid: data.result.userid})
                  .then((data)=>{
                    this.getALLFactoryList({page: 1})
                    this.$store.state.logined = true
                    this.$store.state.navTitle = '首页'
                    this.$store.state.userInfo = data.result
                    this.$router.replace('/homepage')
                  })
              })
              .catch((err) => {
                let loginBtn = document.getElementById('login-btn')
                loginBtn.innerHTML = '短信验证码错误，请重试'
                loginBtn.style = "background-color: red;border:red solid 1px;"
                setTimeout(function () {
                  loginBtn.innerHTML = '登录'
                  loginBtn.style = "background-color: #303641;border:#303641 solid 1px;"
                },1500)

              })

          }

      },
      computed: {
        ...mapGetters([
            ''
        ])
      }



    }
</script>

<style scoped>
  body,html{
    width: 100%;
    height: 100%;
  }
  .login-title-parent{
    font-size: 50px;
    font-weight: 200;
    color: #000000;
    padding-top: 128px;
  }
  .login-title-sub{
    font-size: 20px;
    margin-top: 30px;
    color: #9B9B9B;
  }
  .login-mobile-input{
    width: 300px;
    margin-top: 94px;
    height:45px;
    font-size: 16px;
  }
  .login-code{
    margin-top: 21px;
    height: 45px;
    font-size: 0px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  }
  .login-code-input{
    width: 200px;
    margin-right: 0px;
    height: 45px;
    font-size: 16px;
    /*margin-top: -8px;*/
  }
  .login-code-btn{
    /*margin-top: 21px;*/
    margin-left: -1px;
    width: 100px;
    height: 45px;
    font-size: 12px;
    padding: 0;
    color: #303641;
    border:#9B9B9B solid 1px;
    background-color: #F2F2F2;
    outline: none;

  }
  .login-btn{
    font-size: 0px;
    margin-top: 21px;
  }
  .login-btn-btn{
    width: 300px;
    height: 50px;
    color: #FFFFFF;
    background-color: #303641;
    border:#303641 solid 1px;
    font-size: 15px;
    outline: none;
  }

  .login-btn-wx{
    font-size: 12px;
    color: #9B9B9B;
    margin-top: 84pt;
    margin-bottom: 100px;
    outline: none;
    background-color: transparent;
    border:0;
  }



  input{
    border: 1px solid #969696;
    outline: none;
    box-shadow: none;
    padding-left: 10px;
    height: 23pt;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #969696;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #969696;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #969696;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #969696;
  }

</style>
